<template>
	<div class="activitySign w944">
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<span>活动参加人员：{{totalSign}}人</span>
				<a class="listTwo" @click="importDaoChu">导出数据</a>
				<div class="msearch">
					<input placeholder="请输入关键词……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="60">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column label="学员名字">
					<template slot-scope="scope">
						<span>{{scope.row.nickname}}<i class="cancellation" v-if="scope.row.userStatus!=1">（已注销）</i></span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="报名时间"></el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				countId:'',
				updateTitle:'',
				totalSign:0,
				sort:'',
				search:'',
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				tableData: [],
				multipleSelection: []
			}
		},
		methods: {
			getParams() {
				this.countId = this.$route.params.countId;
				this.updateTitle = this.$route.params.updateTitle;
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/qzHdBm/selectQzHdBm",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						qzHdId:this.countId,
						page:this.currentpage,
						num:this.pagesize,
						nickname:this.search
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							};
							if(this.tableData.length>0){
								this.totalSign = this.total
							}
						}
					}
				});
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			reBack(){
				this.$router.go(-1);
			},
			importDaoChu(){}
		},
		mounted: function() {
			this.getParams();
			if(this.countId==null){
				this.$store.commit('GET_activitySign');
				var s =this.$store.state.activitySign;
				this.countId = s.countId;
				this.updateTitle = s.updateTitle;
			}
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					countId:this.countId,
					updateTitle:this.updateTitle
				}	
				this.$store.commit('SET_activitySign', s);
			});
		}
	}
</script>